<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>账号列表</title>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <script src="../common/header.js"></script>
    <!-- 内容主体区域 -->
    <div id="LAY_app_body">
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <!--检索项-->
                            <form class="layui-form" action="">
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" name="title" lay-verify="title" placeholder="搜索微信号"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <select id="group_id1" style="layui-input-inline" onchange="reloadList()">
                                            <option value="0">选择分组</option>
                                            <option value="">系统组</option>
                                            <option value="">超级管理组</option>
                                            <option value="">部门管理组</option>
                                            <option value="">组级管理组</option>
                                            <option value="">普员组</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <select id="login_status" style="layui-input-inline" onchange="reloadList()">
                                            <option value="9">选择状态</option>
                                            <option value="1">在线</option>
                                            <option value="4">不在服务区</option>
                                            <option value="0">离线</option>
                                            <option value="-1">登录失败</option>
                                            <option value="-2">已登出</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <select id="changePwd" style="layui-input-inline" onchange="reloadList()">
                                            <option value="9">选择</option>
                                            <option value="0">未改密</option>
                                            <option value="2">已改密</option>
                                        </select>
                                    </div>
                                </div>
                                <button class="layui-btn layui-btn-xs" onclick="reloadList();">搜索</button>
                                <button class="layui-btn layui-btn-xs layui-btn-primary" onclick="reloadList(true);">
                                    重置
                                </button>
                            </form>
                            <!--表格内容区域-->
                            <table id="LAY-wechat-manage" lay-filter="LAY-wechat-manage"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="headBar">
        <div class="layui-inline">
            <label class="layui-form-label">批量操作</label>
            <div class="layui-input-inline">
                <select style="layui-input-inline" id="ctlType" lay-filter="ctlType">
                    <option value="1">更改昵称</option>
                    <option value="2">更改性别</option>
                    <option value="3">更改地区</option>
                    <option value="4">更改签名</option>
                    <option value="5">更改密码</option>
                    <option value="6">发表朋友圈</option>
                    <option value="7">增加标签</option>
                    <option value="8">清除指定标签</option>
                    <option value="9">上/下线</option>
                    <option value="10">删除</option>
                    <option value="11">微信分配</option>
                </select>
            </div>
        </div>
    </script>

    <script>
        var getSearchData;
        var reloadList;

        layui.use(['table', 'laytpl', 'form', 'laydate'], function () {
            var $ = layui.$
                , table = layui.table
                , form = layui.form
                , laydate = layui.laydate
                , laytpl = layui.laytpl;

            form.render()

            getSearchData = function () {
                var groupId = $('#group_id1').find("option:selected").val();
                var loginStatus = parseInt($('#onStatus').find("option:selected").val());
                var name = $('#name').val();
                var changePasswd = parseInt($('#changePasswd').find("option:selected").val());
                return {
                    groupId: groupId,
                    loginStatus: parseInt(loginStatus),
                    name: name,
                    changePasswd: parseInt(changePasswd)
                }
            }

            table.render({
                elem: '#LAY-wechat-manage'
                , url: HOST + 'api/v1/wxinfos' //数据接口
                , method: 'post'
                , headers: {Authorization: layui.data("TOKEN").TOKEN}
                , contentType: 'application/json'
                , page: true //开启分页
                , where: getSearchData()
                , cols: [[ //表头
                    {type: 'checkbox', fixed: 'left'}
                    , {type: 'numbers', title: '序号', fixed: 'left'}
                    , {field: 'nickName', title: '名字', width: 220, fixed: 'left', templet: '#wxidTpl'}
                    , {field: 'deviceInfo', title: '设备信息', width: 200}
                    , {field: 'wxId', title: '微信号', width: 200,}
                    , {field: 'friend_num', title: '标签', width: 80}
                    , {field: 'room_num', title: '分配员工', width: 120}
                    , {field: 'mobile', title: '手机号', width: 170}
                    , {field: 'online', title: '在线状态', width: 170, templet: '#msgTpl'}
                    , {fixed: 'right', align: 'center', toolbar: '#barDemo'}
                ]]
                , title: '账户列表'
                , toolbar: '#headBar'
                , defaultToolbar: ['filter', 'exports']
                , error: function (err) {
                    if (err.code === 20002) {
                        layer.open({
                            type: 1,
                            title: false,//不显示标题栏
                            closeBtn: false,
                            area: '300px;',
                            shade: 0.8,
                            id: 'LAY_layuipro', //设定一个id，防止重复弹出
                            btn: ['重新登录'],
                            btnAlign: 'c',
                            moveType: 1,
                            content: '<div style="padding: 60px 30px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">您的登录信息已失效，请重新登录！</div>',
                            success: function (layero) {
                                var btn = layero.find('.layui-layer-btn');
                                btn.find('.layui-layer-btn0').attr({
                                    href: '../login/login.html'
                                });
                            }
                        });
                    } else {
                        layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
                    }
                }
            });

            //监听工具条
            table.on('tool(LAY-wechat-manage)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if (layEvent === 'login') { //查看

                    if (data.data16 !== '' && data.data62 !== '') {
                        window.location.href = '../wechat/add_by_qrcode.html';
                    } else {
                        service.post('api/v1/wxinfo/twicelogin', {
                            id: data.id
                        }).then((response) => {
                            if (response.code === 200) {
                                layer.msg('上线成功', {offset: '45vh', icon: 1, time: 2000});
                                table.reload('LAY-wechat-manage', {
                                    where: getSearchData()//设定异步数据接口的额外参数，任意设
                                    , page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                            } else {
                                layer.msg(response.msg, {offset: '45vh', icon: 5, time: 2000});
                            }
                        }).catch((err) => {
                            layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
                        })
                    }
                } else if (layEvent === 'logout') {
                    layer.confirm('确认要此微信下线吗？', function (index) {
                        service.post('api/v1/wxinfo/logout', {
                            id: data.id
                        }).then((response) => {
                            if (response.code === 200) {
                                layer.msg('下线成功', {offset: '45vh', icon: 1, time: 2000});
                                table.reload('LAY-wechat-manage', {
                                    where: getSearchData()//设定异步数据接口的额外参数，任意设
                                    , page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                            } else {
                                layer.msg(response.msg, {offset: '45vh', icon: 5, time: 2000});
                            }
                        }).catch((err) => {
                            layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
                        })
                    });
                } else if (layEvent === 'wechatInfo') {
                    var board_html = ''
                    var getTpl = wechat_info.innerHTML;
                    laytpl(getTpl).render(data, function (html) {
                        board_html = $.trim(html);
                    });
                    layer.open({
                        type: 1,
                        title: '微信信息',
                        area: ['540px', '400px'],
                        content: board_html
                    })
                }
            });


            reloadList = function (reset, stayPage) {
                if (reset == true) {
                    $('#group_id').find('option:first').attr("selected", false);
                    $('#group_id').find('option:first').attr("selected", true);
                    $('#login_status').find('option:first').attr("selected", false);
                    $('#login_status').find('option:first').attr("selected", true);
                    $('#search').val('');
                    $('#changePwd').find('option:first').attr("selected", false);
                    $('#changePwd').find('option:first').attr("selected", true);
                    $('#LAY-date').val('');
                }
                var groupId = $('#group_id').find("option:selected").val();
                var loginStatus = $('#login_status').find("option:selected").val();
                var search = $('#search').val();
                var changePwd = $('#changePwd').find("option:selected").val();
                var date = $('#LAY-date').val();
                if (stayPage == true) {
                    table.reload('LAY-wechat-manage', {
                        where: { //设定异步数据接口的额外参数，任意设
                            groupId: groupId,
                            loginStatus: loginStatus,
                            search: encodeURIComponent(search),
                            changePwd: changePwd,
                            date: date
                        }
                    });
                } else {
                    table.reload('LAY-wechat-manage', {
                        where: { //设定异步数据接口的额外参数，任意设
                            groupId: groupId,
                            loginStatus: loginStatus,
                            search: encodeURIComponent(search),
                            changePwd: changePwd,
                            date: date
                        }
                        , page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                }
            };
            laydate.render({
                elem: '#LAY-date'
            });

            form.on('select(ctlType)', function (data) {
                layer.open({
                    type: 1
                    , id: 'layerDemo'
                    , area: ['600px', '300px']
                    , content: $('#type' + data.value)
                    , btn: ['确认', '关闭']
                    , btnAlign: 'c' //按钮居中
                    , shade: 0 //不显示遮罩
                    , yes: function () {
                        layer.close();
                    }
                });

            });
        })

    </script>
    <script type="text/html" id="barDemo">
        {{# if(d.online!==10){ }}
        <button class="layui-btn layui-btn-xs layui-btn-success" lay-event="login">上线</button>
        {{# } }}
        {{# if(d.online===10){ }}
        <button class="layui-btn layui-btn-xs layui-btn-warm" lay-event="logout">下线</button>
        {{# } }}
        <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="wechatInfo">微信号页面</button>
    </script>
    <script type="text/html" id="wxidTpl">
        <img src="{{d.headImg || '../assets/images/default_head.jpeg'}}" width="30px">
        {{d.nickName}}
    </script>
    <script type="text/html" id="msgTpl">
        {{# if(d.online===10){ }}
        <span>在线</span>
        {{# } }}
        {{# if(d.online===20){ }}
        <span>不在服务区</span>
        {{# } }}
        {{# if(d.online===30){ }}
        <span>离线</span>
        {{# } }}
        {{# if(d.online===40){ }}
        <span>登录失败</span>
        {{# } }}
        {{# if(d.online===50){ }}
        <span>已登出</span>
        {{# } }}
    </script>
</div>
</body>
<script id="wechat_info" type="text/html">
    <div class="layui-row"
         style="width: 440px;padding:30px;margin:10px auto;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1)">
        <div class="layui-col-xs8">
            <p style="font-size: 18px;color:#000;margin-bottom: 10px">{{d.nickName}}
                {{# if(d.sex==1){ }}
                <i class="layui-icon layui-icon-male"
                   style="font-size: 20px; color: cornflowerblue;"></i>
                {{# } else { }}
                <i class="layui-icon layui-icon-female" style="font-size: 20px; color: pink;"></i>
                {{# } }}
            </p>
            <p class="font-grey"><span>微信号：</span>{{d.alias}}</p>
        </div>
        <div class="layui-col-xs4">
            <div class="layui-form-item">
                <img src="{{d.headImg||'../assets/images/default_head.jpeg'}}" style="width: 60px;height: 60px" alt="">
            </div>
        </div>
        <hr class="layui-bg-gray">
        <br>
        <div class="layui-col-xs12">
            <p style="padding: 10px 0"><span>备注：</span><span style="color: #000;">{{}}</span></p>
            <p style="padding: 10px 0"><span>地区：</span><span style="color: #000;">{{d.province+d.city}}</span></p>
            <p style="padding: 10px 0"><span>签名：</span><span style="color: #000;">{{d.signature}}</span></p>
        </div>
    </div>
</script>
<div id="type1" class="p-20" style="display: none">
    <div class="layui-inline">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-inline">
            <input type="text" name="username" lay-verify="username" autocomplete="off" placeholder="请输入昵称"
                   class="layui-input" value="">
        </div>
    </div>
</div>
<div id="type2" class="p-20" style="display: none">
    <form action="" class="layui-form">
        <div class="layui-inline">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <input type="radio" lay-verify="sex" name="sex" value="男" title="男">
                <input type="radio" lay-verify="sex" name="sex" value="女" title="女" checked>
            </div>
        </div>
    </form>
</div>
<div id="type3" class="p-20" style="display: none">
    <div class="layui-inline">
        <label class="layui-form-label">地区</label>
        <div class="layui-input-inline">
            <input type="text" name="username" lay-verify="username" autocomplete="off" placeholder="请输入地区"
                   class="layui-input" value="">
        </div>
    </div>
</div>
<div id="type4" class="p-20" style="display: none">
    <div class="layui-inline">
        <label class="layui-form-label">签名</label>
        <div class="layui-input-inline">
            <input type="text" name="username" lay-verify="username" autocomplete="off" placeholder="请输入签名"
                   class="layui-input" value="">
        </div>
    </div>
</div>
<div id="type5" class="p-20" style="display: none">
    <div class="layui-inline">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input type="text" name="username" lay-verify="username" autocomplete="off" placeholder="请输入密码"
                   class="layui-input" value="">
        </div>
    </div>
</div>
<div id="type6" class="p-20" style="display: none">
    <div class="layui-inline">
        <label class="layui-form-label">发表朋友圈</label>
        <div class="layui-input-inline">
            <input type="text" name="username" lay-verify="username" autocomplete="off" placeholder="请输入内容"
                   class="layui-input" value="">
        </div>
    </div>
</div>
<div id="type7" class="p-20" style="display: none">
    <div class="layui-inline">
        <label class="layui-form-label">增加标签</label>
        <div class="layui-input-inline">
            <input type="text" name="username" lay-verify="username" autocomplete="off" placeholder="请输入标签名字"
                   class="layui-input" value="">
        </div>
    </div>
</div>
<div id="type8" class="p-20" style="display: none">
    <h3>您确定要清除指定标签吗</h3>
</div>
<div id="type9" class="p-20" style="display: none">
    <form action="" class="layui-form">
        <div class="layui-form-item">
            <label for="account" class="layui-form-label">上/下线</label>
            <div class="layui-input-block">
                <input type="checkbox" checked="" name="open" lay-skin="switch"
                       lay-filter="switchTest" lay-text="上线|下线">
            </div>
        </div>
    </form>
</div>
<div id="type10" class="p-20" style="display: none">
    <h3>您确定要删除吗</h3>
</div>
<div id="type11" class="p-20" style="display: none">
    <form action="" class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">修改分组</label>
            <div class="layui-input-inline">
                <select lay-verify="group">
                    <option value="0">选择分组</option>
                    <option value="5">系统组</option>
                    <option value="5">超级管理组</option>
                    <option value="5">部门管理组</option>
                    <option value="5">组级管理组</option>
                    <option value="5">普员组</option>
                </select>
            </div>
        </div>
    </form>
</div>
</html>
